<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="10"
      :immediate-check="false"
      @load="onLoad"
    >
      <my-cell
        v-for="item in list"
        :key="item.id"
        :item="item"
        :label="userLabelList[$route.params.id] || ''"
        @goArticleContent="goArticlePage"
      ></my-cell>
    </van-list>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import MyCell from '../../components/Cell.vue'
export default {
  components: {
    MyCell
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: {
        page: 1,
        size: 3,
        total: 0
      }
    }
  },
  async mounted() {
    await this.getNowArticleList({
      labelId: this.$route.params.id - 0 + 1,
      page: this.page.page,
      pagesize: this.page.size
    })
    console.log(this.allArticleList[this.$route.params.id - 0 + 1])
    this.list = this.allArticleList[this.$route.params.id - 0 + 1]
    if (this.list[0]) {
      this.page.total = this.list[0].MomentCount
    } else {
      this.page.total = 0
      this.finished = true
    }
  },
  methods: {
    ...mapActions('ArticleList', ['getNowArticleList']),
    goArticlePage(item) {
      if (item) {
        this.$router.push(`/artcontent/${item.id}`)
      }
    },
    async onLoad() {
      // 加载状态结束
      this.loading = true
      this.page.page++
      await this.getNowArticleList({
        labelId: this.$route.params.id - 0 + 1,
        page: this.page.page,
        pagesize: this.page.size
      })
      this.allArticleList[this.$route.params.id - 0 + 1].forEach(item => {
        this.list.push(item)
      })
      // 数据全部加载完成
      this.loading = false
      if (this.list.length >= this.page.total) {
        this.finished = true
      }
    }
  },
  computed: {
    ...mapState('ArticleList', ['allArticleList']),
    ...mapState('Home', ['userLabelList']),
    ...mapState(['searchMomentList'])
  }
}
</script>

<style scoped lang="less">
.van-list {
  margin-bottom: 20px;
}
</style>
